<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>New Item</h2>
    <form @submit.prevent="addItem">
      <table>
        <tr>
          <td>
            ProductId:
          </td>
          <td>
            <input type="text" name="productId" id="productId" v-model="item.productId" />
          </td>
        </tr>
        <tr>
          <td>
            ItemId:
          </td>
          <td>
            <input type="text" name="itemId" id="itemId" v-model="item.itemId" />
          </td>
        </tr>
        <tr>
          <td>
            Quantity:
          </td>
          <td>
            <input type="text" name="quantity" id="quantity" v-model="item.quantity" />
          </td>
        </tr>
        <tr>
          <td>
            ListPrice:
          </td>
          <td>
            <input type="text" name="listPrice" id="listPrice" v-model="item.listPrice" />
          </td>
        </tr>
        <tr>
          <td>
            UnitCost:
          </td>
          <td>
            <input type="text" name="unitCost" id="unitCost" v-model="item.unitCost" />
          </td>
        </tr>
        <tr>
          <td>
            Description:
          </td>
          <td>
            <input type="text" name="attribute1" id="attribute1" v-model="item.attribute1" />
          </td>
        </tr>
      </table>
      <p align="center">
        <input name="editItem" type="submit" value="Save" />
      </p>
    </form>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      item: {
        productId: '',
        itemId: '',
        quantity: '',
        listPrice: '',
        unitCost: '',
        attribute1: '',
      },
    };
  },
  methods: {
    addItem() {
      // Perform the add item action here.
      // Replace this with your own method.
      console.log(this.item);
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/myAccount.css";
</style>